<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Apple苹果(中国大陆) - 官方网站</title>
    <link rel="stylesheet" href="./font/iconfont.css">
    <link rel="icon" href="./imgs/pingguo.svg" type="image/x-icon">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/home.css">
    <link rel="stylesheet" href="./css/login.css">
    <link rel="stylesheet" href="./css/xiangyingshi.css">
</head>
<body>
    <!-- 网页头部 -->
    <div class="mengban"></div>
    <div id="header">
        <div class="zhezhao">

        </div>
        
        <div class="header">
            <ul class="title">
                <li><a href="./home.html"><img src="./imgs/biaotiimgs/logo.png" alt=""></a></li>
                <li><a href=""><img src="./imgs/biaotiimgs/Mac.png" alt=""></a></li>
                <li><a href=""><img src="./imgs/biaotiimgs/iPad.png" alt=""></a></li>
                <li><a href=""><img src="./imgs/biaotiimgs/iPhone.png" alt=""></a></li>
                <li><a href=""><img src="./imgs/biaotiimgs/Watch.png" alt=""></a></li>
                <li><a href=""><img src="./imgs/biaotiimgs/Music.png" alt=""></a></li>
                <li><a href=""><img src="./imgs/biaotiimgs/jishu.png" alt=""></a></li>
                <li><a class="sousuo"><i class="iconfont">&#xe612;</i></a>
                <div class="sousuo-tan">
                        <div>
                            <i class="iconfont">&#xe612;</i>
                            <input type="text" >
                            <span>搜索 apple.com.cn</span>
                            <i class="iconfont guanbi">×</i>
                        </div>
                        
                </div>
                <aside>
                    <section class="sousuo-xia">
                        <h3>快速连接</h3>
                        <ul>
                            <li><a href="">查找零售店</a></li>
                            <li><a href="">Apple Store 商店在线选购</a></li>
                            <li><a href="">配件</a></li>
                            <li><a href="">AirPods</a></li>
                            <li><a href="">AirTag</a></li>
                        </ul>
                    </section>
                </aside>
                        
                </li>
                <li id="shangdian"><img src="./imgs/biaotiimgs/shooping.png" alt="" class="shangdian">
                    <div class="gouwudai-xiala">
                        <p class="gouwudai-kong">你的购物袋是空的</p>
                        <div>
                            <ul>
                                <li><i class="iconfont">&#xe61f;</i><a href="">购物袋</a></li>
                                <li><i class="iconfont">&#xe624;</i><a href="">收藏</a></li>
                                <li><i class="iconfont">&#xec89;</i><a href="">订单</a></li>
                                <li><i class="iconfont">&#xe60c;</i><a href="">账户</a></li>
                                <li><i class="iconfont">&#xe60a;</i><a href="./login.html" id="login">登录</a></li>
                                <script src="./js/jquery.js"></script>
                                <script>
                                // 登录守卫
                                // 判断是否具有登录标志
                                if(localStorage.getItem("isLogin") === "OK"){
                                    // 登录了
                                    $("#login").html(`<a id="login">${localStorage.getItem("username")}</a>`)
                                }else{
                                    // 没登录
                                    $("#login").html(`<a href="./login.html">登录</a>`)
                                }
                                </script>
                            </ul>
                        </div>
                        
                    </div>
                </li>
            </ul>
        </div>
        
        <div class="header_shipei">
            <ul class="title2">
                <li><a href=""><i class="iconfont">&#xe62b;</i></a></li>
                <li><a href=""><img src="./imgs/pingguo2.svg" alt=""></a></li>
                <li><a href=""><img src="./imgs/shangdianda.svg" alt="" class="shangdian"></a></li>
            </ul>
        </div>
        
    

    </div>
    <!-- 内容 -->
    <div id="neirong">
        <div class="neirong">
            <h1>
                请登录。
            </h1>
            <div class="neirong-box1">
                <div class="neirong-box2">
                    
                        <form>
                            <div class="box1">
                               <input type="text" class="zhanghao" id="Apple">
                                <span class="zhanghao-s" >Apple ID</span>
                                <span class="zhang">Apple ID 未填写</span> 
                            </div>
                            <div class="box1">
                                <input type="passworld" class="mima" id="pass">
                                <span class="passworld-s">密码</span>
                                <span class="mi">密码未填写</span>
                            </div>
                            <p>
                                你的 Apple ID 是你用来登录 iTunes、App Store 和 iCloud 的电子邮件地址或手机号码。
                            </p>
                            <div class="box2">
                                <button id="btn"><span>登录</span></button>
                            </div>
                            <div class="box3">
                                <a href=""><span>忘了自己的 Apple ID 或密码？</span></a>
                            </div>
                            <div class="box4">
                                <a href="./register.html"><span>没有 Apple ID？立即创建一个。</span></a>
                            </div>
                        </form>
                    
                </div>
            </div>
            
        </div>

    </div>
    <div class="neirong-b">
        <div class="neirong-bottom">
            <div class="bangzhu">
                需要更多帮助？<button>立即在线交流</button>或致电400-666-8800。
            </div>
        </div>
    </div>
    <div class="neirong-A">
        <div class="neirong-wenzi">
            <p>
                Apple Store 在线商店采用符合业界标准的加密技术对您提交的信息进行保密。进一步了解我们的安全政策。
            </p>
        </div>
    </div>
    <footer>
        <div class="foot">
            <div class="foot-1">
                <p>
                    更多选购方式：<a href="">查找你附近的 Apple Store 零售店</a>及<a href="">更多门店</a>，或者致电 400-666-8800。
                </p>
            </div>
            <div class="foot-2">
                <div class="foot-bottom">
                    <p>
                        Copyright © 2021 Apple Inc. 保留所有权利。
                    </p>
                </div>
                <div class="foot-bottom2">
                    <p>
                        <a href="">隐私政策</a>
                        <a href="">使用条款</a>
                        <a href="">销售政策</a>
                        <a href="">法律信息</a>
                        <a href="" class="xiao">网站地图</a>
                    </p>
                </div>
            </div>
        </div>
    </footer>
    

</body>
    <script src="./js/jquery.js"></script>
    <script src="./js/login.js"></script>
    <script src="./js/shousuo.js"></script>
    <script src="./js/home.js"></script>
    <script>
        // ajax发起请求
        $("#btn").click(function(){
        $.ajax({
            url:"http://localhost:3000/api1",
            data:{
                type:"login",
                username:$("#Apple").val(),
                password:$("#pass").val()
            },
            success:res=>{
                res = JSON.parse(res)
                // console.log(res);
                if(res.code === 0){
                    alert("密码错误");
                    $("#pass").val("");
                    $("#pass")[0].focus();
                }else if(res.code === 1){
                    if(confirm("登录成功，是否跳转到首页")){
                        location.href = "./home.html";
                    }
                    localStorage.setItem("isLogin","OK");
                    localStorage.setItem("username",res.data);
                }else if(res.code === 2){
                    if(confirm("用户名不存在，是否跳转到注册")){
                        location.href = "./register.html?username="+$("#Apple").val();
                    }else{
                        $("#Apple").val("");
                        $("#Apple")[0].focus();
                    }
                }
            }
        })
    })
    </script>
</html>